<template>
  <div class="main">
    <div class="main-left">
        <span :class="{
          'cat-item': true,
          'active': active === index
        }" v-for="(item,index) in 10" :key="index" @click="changeActive(index)">家电</span>
    </div>

    <div class="main-right">

        <!-- 各个类别 -->
        <div class="cat-item-box" v-for="(item,index) in catList" :key="index">
            <span class="cat-title">{{ item.name }}</span>
            <div class="cat-main">
                <div class="cat-trait" :style="(index+1)%3 ? 'margin-right: .375rem;' : ''" v-for="(item,index) in 5" :key="index">
                    <img src="../assets/logo.png" alt="" class="cover">
                    <span class="name">以旧换新</span>
                </div>
            </div>
        </div>

    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent,ref,Ref,reactive } from 'vue'

export default defineComponent({
    setup() {
        // 左侧分类
        const active:Ref<number> = ref(0)
        const changeActive = (index: number) => {
          active.value = index;
        }

        // 右侧分类
        const navActive: Ref<number> = ref(0);
        const changeNavActive = (index: number) => {
            navActive.value = index
        }

        const catList = reactive([
            {name: '电视'},
            {name: '空调'},
            {name: '洗衣机'},
            {name: '冰箱'},
            {name: '厨卫大电'},
            {name: '厨房小电'},
            {name: '生活电器'},
        ])

        return {
            active,
            changeActive,
            catList,
        }
    }
})
</script>


<style lang="less" scoped>
.main {
  display: flex;
  flex: 1;
  overflow: hidden;
  margin-top: .1875rem;

  .main-left {
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    width: 3.125rem;
    padding-bottom: .5rem;

    &::-webkit-scrollbar {
      display: none;
    }

    .cat-item {
      width: 100%;
      text-align: center;
      line-height: 1.25rem;
    }

    .active {
      background-color: #fff;
      font-weight: 600;
      font-size: .40625rem;
    }
  }

  .main-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    background-color: #fff;
    border-top-left-radius: .3125rem;
    overflow: auto;
    padding: .375rem 0 0 .375rem;
    
    &::-webkit-scrollbar{
        display: none;
    }

    .cat-item-box {

        .cat-title {
            display: block;
            font-weight: 600;
            margin-bottom:  .3125rem;
        }

        .cat-main {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

        .cat-trait {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: .375rem;
        }

        .cover {
            width: 1.75rem;
            height: 1.75rem;
            margin-bottom: .1875rem;
        }

        .name {
            font-size: .34375rem;
        }
    }
  }
}
</style>